import React from 'react';
//import ErrorBoundary from '../view/ErrorBoundary'

// Theme context，默认的 theme 是 “light” 值
const ThemeContext = React.createContext('light');

// 用户登录 context
const UserContext = React.createContext({
  name: 'Guest',
});

class MultipleContextDemo extends React.Component {
    render() {
        //throw new Error('发生错误了')
        const {signedInUser, theme} = this.props;
        return (
            <ThemeContext.Provider value={theme}>
                <UserContext.Provider value={signedInUser}>
                    {/* <ErrorBoundary>
                        <Content />
                    </ErrorBoundary> */}
                     <Content />
                </UserContext.Provider>
            </ThemeContext.Provider>
          );
    }
}

// function Layout() {
//     return (
//       <div>
//         <Content />
//       </div>
//     );
// }

function Content() {
    //throw new Error('有错误了')
    return (
        <ThemeContext.Consumer>
            {theme => {
                return (
                    <UserContext.Consumer>
                        {user => (
                            <div>
                                <div>user:{user}</div>
                                <div>theme: {theme}</div>
                            </div>
                        )}
                    </UserContext.Consumer>
                )
            }}
        </ThemeContext.Consumer>
    );
}

export default MultipleContextDemo;

